<template>
  <router-link :to="`/album/${album.id}`" class="album-card">
    <div class="cover">
      <img :src="album.picUrl" :alt="album.name">
    </div>
    <h3 class="name">{{ album.name }}</h3>
    <div class="artists">
      {{ album.artists?.map(artist => artist.name).join(' / ') }}
    </div>
  </router-link>
</template>

<script setup lang="ts">
import type { AlbumInfo } from '@/types'

defineProps<{
  album: AlbumInfo
}>()
</script>

<style scoped>
.album-card {
  text-decoration: none;
  color: inherit;
}

.cover {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 8px;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.name {
  font-size: 14px;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.artists {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 